<template>
  <div class="app-container">
    <div v-show="is_show_chart" style="width: 1600px;margin: 0 auto">
      <div class="clearfix">
        <el-button style="float: right" native-type="submit" type="primary" @click="tableshow">表格展示</el-button>
      </div>
      <div style="display: flex;justify-content: space-between">
        <p>统计区间：{{ QueryForm.start_time }} — {{ QueryForm.end_time }}</p>
        <p>安全库存：
          <el-switch v-model="echartquery.with_sale_count" @change="showchart"></el-switch>
        </p>
      </div>
      <div id="line1" style="width: 1600px;height:700px"></div>
    </div>
    <div v-show="!is_show_chart">
      <div class="topform">
        <el-form ref="QueryForm" :model="QueryForm" @submit.native.prevent
                 style="display: flex;justify-content: space-between">
          <div>
            <el-form-item label="统计时间：" label-width="100px" style="width: 600px;float: left">
              <el-date-picker
                style="float: left;width: 45%"
                v-model="QueryForm.start_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                type="datetime"
                placeholder="请选择开始时间">
              </el-date-picker>
              <div style="float: left;margin: 0 10px">至</div>
              <el-date-picker
                style="float: left;width: 45%"
                v-model="QueryForm.end_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                type="datetime"
                placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
            <el-button native-type="submit" type="primary" style="margin-left: 10px" icon="el-icon-search"
                       @click="Query(true)">查询
            </el-button>
          </div>
          <div>
            <el-button native-type="submit" type="primary" @click="exceldown()">导出</el-button>
            <el-button native-type="submit" type="primary" @click="showchart()">图表展示</el-button>
          </div>
        </el-form>
      </div>
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                header-cell-class-name="tableheader" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="物料编号">
          <template slot-scope="scope">
            {{ scope.row.materiel_total_show_no }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.materiel_name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开始日期库存">
          <template slot-scope="scope">
            {{ scope.row.first_min_count }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购量">
          <template slot-scope="scope">
            {{ scope.row.purchase_count }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购入库">
          <template slot-scope="scope">
            {{ scope.row.purchase_in_count }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="其他入库">
          <template slot-scope="scope">
            {{ scope.row.other_in_count }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="出库">
          <template slot-scope="scope">
            {{ scope.row.other_out_count + scope.row.work_out_count }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="生产用量">
          <template slot-scope="scope">
            {{ scope.row.work_use_num }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="截至日期库存">
          <template slot-scope="scope">
            {{ scope.row.max_count }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="安全库存">
          <template slot-scope="scope">
            {{ scope.row.safe_count }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          style="text-align: center"
          layout="prev, pager, next"
          small
          :current-page="QueryForm.page"
          :page-size="QueryForm.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      QueryForm: {
        start_time: '',
        end_time: '',
        isPage: true,
        page: 1,
        pagesize: 30
      },
      list: [],
      total: 0,
      listLoading: true,
      echartquery: {
        with_sale_count: false,
        search_materiel_ids: [],
      },
      is_show_chart: false,
      safecount: false,
      myChart: null,
    };
  },
  created() {
    this.Query();
  },
  methods: {
    Query() {
      this.listLoading = true
      this.$post(this.$api + '/RK/get_materiel_pagelist', this.QueryForm)
        .then((res) => {
          this.listLoading = false
          if (res.code === 0) {
            this.list = res.rows
            this.total = res.total
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    exceldown() {
      this.$downloadpost(this.$api + '/RK/down_materiel_pagelist_excel', this.QueryForm, true)
    },
    handleSelectionChange(val) {
      this.echartquery.search_materiel_ids = []
      for (var i in val) {
        this.echartquery.search_materiel_ids.push(val[i].materiel_id)
      }
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query();
    },


    tableshow() {
      this.is_show_chart = false
      if (this.myChart != null && this.myChart !== "" && this.myChart !== undefined) {
        this.myChart.dispose();
      }
    },
    showchart() {
      this.$post(this.$api + '/RK/get_materiel_echart', {
        start_time: this.QueryForm.start_time,
        end_time: this.QueryForm.end_time,
        with_sale_count: this.echartquery.with_sale_count,
        search_materiel_ids: this.echartquery.search_materiel_ids,
      })
        .then((res) => {
          if (res.code === 0) {
            this.is_show_chart = true
            this.data = res.data
            this.line1Echarts()

          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    line1Echarts() {
      if (this.myChart != null && this.myChart !== "" && this.myChart !== undefined) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(document.getElementById('line1'), 'light');
      this.myChart.clear();
      this.myChart.off('click') // 如果不加off事件，就会叠加触发
      const line1option = {
        tooltip: {
          triggerOn: "click",
          trigger: "item",
          formatter: (params, ticket, callback) => {
            axios.get(this.$api + '/RK/get_materiel_model?echart_id='+params.seriesId+'&date='+params.name)
              .then((res) => {
                if (res.data.code === 0) {
                  var color = params.color;
                  var htmlStr = '<div>';
                  htmlStr += params.name + '<br/>'
                    + '<span class="yuan" style="background-color:' + color + ';"></span>'
                    + '采购数量：' + res.data.data.purchase_count + '<br/>'
                    + '<span class="yuan" style="background-color:' + color + ';"></span>'
                    + '采购入库：' + res.data.data.purchase_in_count + '<br/>'
                    + '<span class="yuan" style="background-color:' + color + ';"></span>'
                    + '其他入库：' + res.data.data.other_in_count + '<br/>'
                    + '<span class="yuan" style="background-color:' + color + ';"></span>'
                    + '出库：' + res.data.data.work_out_count + '<br/>'
                    + '<span class="yuan" style="background-color:' + color + ';"></span>'
                    + '生产用量：' + res.data.data.work_use_num + '<br/>'
                    + '<span class="yuan" style="background-color:' + color + ';"></span>'
                    + '安全库存：' + res.data.data.safe_count + '<br/>'
                    + '</div>'
                  callback(ticket, htmlStr)
                } else {
                  this.$notify({
                    title: '失败',
                    message: res.data.msg,
                    type: 'error'
                  });
                }
              });
            return '加载数据中···';


          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          x: 50,
          y: 50,
          x2: 50,
          y2: 100,
        },
        legend: {
          data: this.data.legend_data,
          bottom: 'bottom',
          left: 'center'
        },
        series: this.data.series_data
      };
      this.myChart.on('click', (params) => {
        console.log(params);
      })
      this.myChart.setOption(line1option);
    },
  }
};
</script>

<style scoped>
.yuan {
  margin-right: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
</style>
